/* 全局主题样式 - 确保所有组件都支持深色模式 */

/* CSS变量定义 */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --accent-color: #4f46e5;
  --accent-hover: #4338ca;
}

/* 深色模式变量 */
[data-theme="dark"] {
  --bg-primary: #1f2937;
  --bg-secondary: #374151;
  --bg-tertiary: #4b5563;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: #4b5563;
  --accent-color: #3b82f6;
  --accent-hover: #2563eb;
}

/* 护眼模式变量 */
[data-theme="eye-care"] {
  --bg-primary: #fef7e6;
  --bg-secondary: #f3e8d3;
  --bg-tertiary: #e5d4b1;
  --text-primary: #6b4513;
  --text-secondary: #8b5a2b;
  --text-muted: #a68b5b;
  --border-color: #e5d4b1;
  --accent-color: #d4a574;
  --accent-hover: #c19a5c;
}

/* 护眼深色模式变量 - 结合护眼和深色模式 */
[data-theme="eye-care-dark"] {
  --bg-primary: #2d1b0e;
  --bg-secondary: #3d2815;
  --bg-tertiary: #4d331c;
  --text-primary: #f4e6d7;
  --text-secondary: #d4c4b0;
  --text-muted: #b8a896;
  --border-color: #4d331c;
  --accent-color: #d4a574;
  --accent-hover: #c19a5c;
}

/* 全局深色模式样式覆盖 */
[data-theme="dark"] * {
  color: inherit;
}

/* 护眼深色模式样式覆盖 */
[data-theme="eye-care-dark"] * {
  color: inherit;
}

/* 护眼深色模式：在深色基础上应用护眼滤镜 */
[data-theme="eye-care-dark"] body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  /* 护眼滤镜：减少蓝光，增加暖色调 */
  filter: sepia(0.15) hue-rotate(8deg) saturate(0.95) brightness(0.98);
  /* 保持字体清晰度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 护眼深色模式覆盖设置弹窗 */
[data-theme="eye-care-dark"] .settings-modal {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 强制深色模式覆盖所有可能的白色背景 */
[data-theme="dark"] .container,
[data-theme="dark"] .content,
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .log-item,
[data-theme="dark"] .monitor-item,
[data-theme="dark"] .settings-modal {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 强制覆盖所有可能的浅色背景 */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200 {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 强制覆盖所有可能的浅色文字 */
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

[data-theme="dark"] table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] td {
  background-color: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] button {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-primary {
  background-color: var(--accent-color) !important;
  color: white !important;
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* 确保所有容器都使用主题颜色 */
[data-theme="dark"] .container,
[data-theme="dark"] .content,
[data-theme="dark"] .panel,
[data-theme="dark"] .card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 分页组件深色模式 */
[data-theme="dark"] .pagination {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .pagination button {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .pagination button:hover {
  background-color: var(--accent-color) !important;
  color: white !important;
}

/* 状态标签深色模式 */
[data-theme="dark"] .status {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .status.published {
  background-color: #065f46 !important;
  color: #10b981 !important;
}

[data-theme="dark"] .status.draft {
  background-color: #92400e !important;
  color: #f59e0b !important;
}

[data-theme="dark"] .status.pending {
  background-color: #1e40af !important;
  color: #3b82f6 !important;
}

[data-theme="dark"] .status.active {
  background-color: #065f46 !important;
  color: #10b981 !important;
}

[data-theme="dark"] .status.inactive {
  background-color: #991b1b !important;
  color: #ef4444 !important;
}

/* 角色标签深色模式 */
[data-theme="dark"] .role {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .role.admin {
  background-color: #7c2d12 !important;
  color: #ea580c !important;
}

[data-theme="dark"] .role.manager {
  background-color: #1e40af !important;
  color: #3b82f6 !important;
}

[data-theme="dark"] .role.user {
  background-color: #374151 !important;
  color: #9ca3af !important;
}
